<template>
    <payTable :columns="columns" :tableData="tableData" :tableLoading="tableLoading">
        <!-- 产品图片 -->
        <template v-slot:orderDetail[0].imageUrl="{row}">
            <img :src="row.orderDetail[0].imageUrl" width="100" height="30" alt="">
        </template>
        <!-- 自定义按钮 -->
        <template v-slot:action="{row}">
            <el-button size="small" type="primary" :disabled="(row.order_status===4 || row.pay_status===1)" @click="goPay(row)">去支付</el-button>
            <el-button size="small" type="danger" @click="delOrder(row)">删除</el-button>
        </template>
        <!-- 支付状态 -->
        <template v-slot:pay_status="{row}">
            {{(row.pay_status===0 ? '未支付' : '已支付')}}
        </template>
        <!-- 订单状态 -->
        <template v-slot:order_status="{row}">
            {{orderStatus(row)}}
        </template>
    </payTable>
</template>

<script setup>
import * as api from "@/api/pay.js"
import {ref,onMounted} from "vue"
import payTable from "@/components/payTable/index.vue"
import { useRouter } from "vue-router";
import { ElMessageBox,ElMessage } from "element-plus";
let router = useRouter()
// 定义表格的列
let columns = ref([
    {
        label:"产品图片",
        prop:"orderDetail[0].imageUrl"
    },
    {
        label:"订单编号",
        prop:"order_id"
    },
    {
        label:"产品名称",
        prop:"orderDetail[0].productName"
    },
    {
        label:"数量",
        prop:"orderDetail[0].quantity",
        width:"50px"
    },
    {
        label:"总价格",
        prop:"total_fee"
    },
    {
        label:"创建时间",
        prop:"create_time",
        width:"200px"
    },
    {
        label:"支付状态",
        prop:"pay_status"
    },
    {
        label:"订单状态",
        prop:"order_status"
    },
    {
        label:"操作",
        prop:"action",
        width:"180px"
    }

])
// 表格数据
let tableData = ref([])
// 加载动画
let tableLoading = ref(false)

// 发送请求
let getOrder = async () => {
    // 开启动画
    tableLoading.value = true
    try{
        let res = await api.getOrderApi()
        tableData.value = res.data.data
        // 关闭动画
        tableLoading.value = false
    }catch(e){
        // 关闭动画
        tableLoading.value = false
        console.log(e)
    }
}

onMounted(()=>{
    getOrder()
})


// 订单状态
let orderStatus = (row) =>{
    switch(row.order_status){
        case 0:
            return '未提交'
        case 1:
            return '提交成功'
        case 2:
            return '已经取消'
        case 3:
            return '无效订单'
        case 4:
            return '交易关闭'
        case 5:
            return '退货'
    }
}


// 去支付
let goPay = (row) => {
    // 跳转到支付页面，通过query携带当前的order_id
    router.push('/pay/payMent?order_id='+ row.order_id)
}

// 删除订单
let delOrder = async (row) => {
    // 消息提示框
    ElMessageBox.confirm('此操作将永久删除'+row.orderDetail[0].productName +'这条订单，是否继续?','删除提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        })
        // 点击确定按钮
        .then(async ()=>{
            try{
                // 发起请求，删除数据
                let res = await api.delOrderApi(row.order_id)
                console.log(row)
                // 更新列表
                getOrder()
                ElMessage({
                    message: '删除成功·',
                    type: 'success',
                })
            }catch(e){
                ElMessage({
                    message: e,
                    type: 'error',
                })
            }
        })
        // 点击取消按钮
        .catch(()=>{
            ElMessage({
                message: '已取消删除',
                type: 'warning',
            })
        })
}
</script>


<script>
export default{
    meta:{
        title: 'order', 
        name: '订单管理',
        routeName:"order",
        icon:'#icon-dd'
    }
}


</script>